<template>
	<view class="slider-container">
		<!-- 加号 -->
		<view class="tip"> + </view>
		<movable-area class="sliderBar" :style="{height:(width)+'px'}">
			<!-- line -->
			<view class="sliderLine" :style="{'height': (scrollY - 16 )+'px'}"> </view>
			<movable-view class="slider" direction="vertical" :animation="false" :out-of-bounds="false" :damping="0" :inertia="false"
				:x="0":y="y" @change="onChange">
			</movable-view>
		</movable-area>
		<!-- 减号 -->
		<view class="tip"> - </view>
		<view class=""> {{ score  }}x </view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Number,
				default: 1
			},
			max: {
				type: Number,
				default: 10
			},
			min: {
				type: Number,
				default: 1
			},
			width: {
				type: Number,
				default: 320,
			}
		},
		data() {
			return {
				score: 1,
				scrollY: 0,
				y: 0,
			};
		},
		watch: {
			value: {
				handler(val) {
					let index = 1 - ((val - 1) / this.max ) || 1

					this.y = this.width * index - 16
					
					this.scrollY = this.width - this.y

					this.score = val
				},
				immediate: true
			}
		},
		methods: {
			onChange: function(e) {
				// 手动拖动才生效 
				if (e.detail.source === 'touch') {
					
					console.log('touch',e.detail)
					
					let width = this.$props.width - 16 || 0;
					let y = e.detail.y >= 0 ? width - e.detail.y : 0;
					let diff = (this.max - this.min) * 10
					let step = width / diff
					let num = Math.ceil((y / step)) / 10;
					num += 1
					num = num > this.max ? this.max : num;
					num = num < this.min ? this.min : num;

					this.scrollY = y + 24
					console.log("拖拽条y：", y, width + 16 - (num * step * 10))
					if (num == this.score) {
						return
					} else {
						this.score = num;
					}
					console.log("拖拽条：", width, y, step, diff, num, )
					this.$emit('change', num);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tip {
		font-size: 40rpx;
	}

	.sliderLine {
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 8rpx;
		height: auto;
		transform: translateX(-50%);
		background: $uni-color-primary;
		z-index: 2;
	}

	.slider-container {
		padding: 10rpx 0;
		position: relative;
		width: 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, .35);
		border-radius: 16rpx;
		color: #fff;
		font-size: 24rpx;

		.sliderBar {
			width: 100%;
			height: 100%;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: 50%;
				top: 0;
				width: 2rpx;
				height: 100%;
				background-color: $uni-color-primary;
				transform: translateX(-50%);
			}

			.slider {
				width: 48rpx;
				height: 48rpx;
				position: relative;
				z-index: 2;

				&::after {
					content: '';
					position: absolute;
					border-radius: 16rpx;
					background-color: $uni-color-primary;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>